<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯视频在线观看</title>
    <link rel="stylesheet" type="text/css" href="detailpage.css">
</head>

<body>
    <div class="page">
        <div class="header">
            <div class="header-box">
                <div class="header-contents">
                    <div class="header-tencent_video-logo">
                        <img src="images/header-logo.png">
                    </div>
                    <div class="header-category">
                        <div class="header-category-content">
                            <a href="#">
                                <span>首页</span>
                            </a>
                            <a href="#">
                                <span>VIP会员</span>
                            </a>
                            <a href="#">
                                <span>电视剧</span>
                            </a>
                            <a href="#">
                                <span>电影</span>
                            </a>
                            <a href="#">
                                <span>综艺</span>
                            </a>
                            <a href="#">
                                <span>动漫</span>
                            </a>
                            <a href="#">
                                <span>少儿</span>
                            </a>
                        </div>
                        <div class="header-category-all">
                            <a href="#">
                                <span>全部</span>
                                <div><img src="images/arrowdown-icon.png"></div>
                            </a>
                        </div>
                    </div>
                    <div class="header-search">
                        <div class="header-search-frame">
                            <div class="search_words">
                                <input type="text" placeholder="诛仙" class="search-input">
                            </div>
                            <button type="submit" class="search_button">
                                <img src="images/search-icon.jpg" class="search_icon">
                            </button>
                        </div>
                    </div>
                    <div class="header-select">
                        <span>
                            <img src="images/VIP-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/game-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/record-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/video-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/download.png" alt="">
                        </span>
                        <div id="user">
                            <img src="images/user-icon.png" alt="" class="user_icon">
                            <!-- <img src="images/user_login_icon.png" alt="" class="user_icon"> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail">
            <div class="detail-box">
                <div class="detail-left">
                    <div class="detail-left-play">
                        <div class="play-frame">
                            <!-- <img src="images/bofang-image.jpg"> -->
                            <video muted autoplay loop controls>
                                <!-- <source
                                    src="https://smalla.oss-cn-guangzhou.aliyuncs.com/358f7886212c48939403f861f2647a6c.mp4"> -->
                                <source src="">
                            </video>
                        </div>
                    </div>
                    <div class="detail-left-comment_discuss">
                        <div class="comment">
                            <div class="comment-header">用户评价
                                <div class="comment-turnpage">
                                    <img src="images/arrow-left-icon.png">
                                    <span>1</span>
                                    <img src="images/arrow-right-icon.png">
                                </div>
                            </div>
                            <div class="comment-data">
                                <div class="comment-data-1">
                                    <div class="comment-data-1-content">
                                        <div class="comment-data-1-content-left">
                                            <span class="comment-data-1-content-left-title">腾讯视频评分</span>
                                            <div><img src="images/data1.jpg"></div>
                                            <span>388.8万人点评</span>
                                        </div>
                                        <div class="comment-data-1-content-right">
                                            <div class="comment-data-1-content-label">
                                                <div>强推</div>
                                                <div>推荐</div>
                                                <div>可看</div>
                                                <div>一般</div>
                                                <div>不推荐</div>

                                            </div>
                                            <div class="comment-data-1-content-lines">
                                                <div class="comment-data-1-content-line-container">
                                                    <div class="comment-data-1-content-line-box">
                                                        <div
                                                            class="comment-data-1-content-line comment-data-1-content-line1">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="comment-data-1-content-line-container">
                                                    <div class="comment-data-1-content-line-box">
                                                        <div
                                                            class="comment-data-1-content-line comment-data-1-content-line2">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="comment-data-1-content-line-container">
                                                    <div class="comment-data-1-content-line-box">
                                                        <div
                                                            class="comment-data-1-content-line comment-data-1-content-line3">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="comment-data-1-content-line-container">
                                                    <div class="comment-data-1-content-line-box">
                                                        <div
                                                            class="comment-data-1-content-line comment-data-1-content-line4">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="comment-data-1-content-line-container">
                                                    <div class="comment-data-1-content-line-box">
                                                        <div
                                                            class="comment-data-1-content-line comment-data-1-content-line5">
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <!-- <div class="">
                                    </div> -->
                                    <!--  -->

                                </div>
                                <div class="comment-data-2">
                                    <div class="comment-data-2-content">
                                        <div class="comment-data-2-content-top">
                                            <div class="comment-data-2-content-top-user">
                                                <img src="images/user-icon.png">
                                                <div>宝宝要吃奶</div>
                                            </div>
                                            <div class="comment-data-2-content-top-stars">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <div>强推</div>
                                            </div>
                                        </div>
                                        <div class="comment-data-2-tags">
                                            <div>制作惊艳</div>
                                            <div>剧情满分</div>
                                            <div>人物满意</div>
                                        </div>
                                        <div class="comment-data-2-comment">
                                            我是忠实的斗罗粉，斗一到斗五都看完了，真的非常喜欢，斗罗不完，我们不散，就算完了我还在，这一辈子都是斗罗粉
                                        </div>
                                        <div class="comment-data-2-time">累计观看超过3小时</div>
                                    </div>


                                </div>
                                <div class="comment-data-3">
                                    <div class="comment-data-2-content">
                                        <div class="comment-data-2-content-top">
                                            <div class="comment-data-2-content-top-user">
                                                <img src="images/user-icon.png">
                                                <div>@2024</div>
                                            </div>
                                            <div class="comment-data-2-content-top-stars">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <img src="images/star-orange-icon.png">
                                                <div>强推</div>
                                            </div>
                                        </div>
                                        <div class="comment-data-2-tags">
                                            <div>制作惊艳</div>
                                            <div>剧情精彩</div>
                                            <div>人物满意</div>
                                        </div>
                                        <div class="comment-data-2-comment">
                                            我唯一一点不明白的是，唐三的女儿，为什么要跟他兄弟的儿子的儿子成为情侣？
                                        </div>
                                        <div class="comment-data-2-time">累计观看少于1小时</div>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <div class="discuss">
                            <div class="discuss-header">
                                <div id="discuss-name">讨论</div>
                                <div id="discuss-num">290093</div>
                            </div>
                            <div class="discuss-content">
                                <!-- <div class="login_can_talk"></div> -->
                                <div class="discuss-choice">
                                    <div class="discuss-choice-hot">
                                        <span>热门</span>
                                    </div>
                                    <div class="discuss-choice-new">
                                        <span>最新</span>
                                    </div>
                                </div>
                                <div class="discuss-content-items">
                                    <div class="discuss-item">
                                        <div class="discuss-item-head">
                                            <div class="discuss-item-head-box">
                                                <div class="discuss-item-head-user">
                                                    <img src="images/user-icon.png">
                                                </div>
                                                <div class="discuss-item-head-name">
                                                    <span>一天</span>
                                                </div>
                                                <div class="discuss-item-head-icon">
                                                    <img src="images/VIP-icon.png">
                                                </div>
                                                <div class="discuss-item-head-time_site">
                                                    03-09·黑龙江
                                                </div>
                                            </div>
                                        </div>
                                        <div class="discuss-item-content">
                                            <div>那是科目三诶</div>
                                        </div>
                                        <div class="discuss-item-icons">
                                            <div class="discuss-item-icon">
                                                <span><img src="images/heart-icon.png"></span>
                                                <span>174</span>
                                            </div>
                                            <div class="discuss-item-icon">
                                                <span><img src="images/huifu-icon.png"></span>
                                                <span>3</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discuss-item">
                                        <div class="discuss-item-head">
                                            <div class="discuss-item-head-box">
                                                <div class="discuss-item-head-user">
                                                    <img src="images/user-icon.png">
                                                </div>
                                                <div class="discuss-item-head-name">
                                                    <span>山</span>
                                                </div>
                                                <div class="discuss-item-head-time_site">
                                                    01-06·江西
                                                </div>
                                            </div>
                                        </div>
                                        <div class="discuss-item-content">
                                            <div>下集不会真的要死正选队员啊？不要啊，每个队员我都好喜欢呜呜</div>
                                        </div>
                                        <div class="discuss-item-icons">
                                            <div class="discuss-item-icon">
                                                <span><img src="images/heart-icon.png"></span>
                                                <span>72</span>
                                            </div>
                                            <div class="discuss-item-icon">
                                                <span><img src="images/huifu-icon.png"></span>
                                                <span>16</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="discuss-item-comments">
                                        <div class="discuss-item-comment-content">
                                            <div class="discuss-item-comment-content-header">
                                                <div class="discuss-item-comment-content-header-content">
                                                    <div class="comment-header-name">斗罗粉</div>
                                                    <div class="comment-header-degree">
                                                        <img src="images/VIP-icon.png">
                                                    </div>
                                                    <div class="comment-header-date">03-10 · 广东</div>
                                                </div>

                                            </div>
                                            <div class="discuss-item-comment-content-body">好看爱看，舍不得！！！</div>
                                            <div class="discuss-item-comment-content-icon">
                                                <div class="discuss-item-comment-content-icon1">
                                                    <span><img src="images/heart-icon.png"></span>
                                                    <span>15</span>
                                                </div>
                                                <div class="discuss-item-comment-content-icon1">
                                                    <span><img src="images/huifu-icon.png"></span>
                                                    <span>1</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-right">
                    <div class="detail-right-container">
                        <div class="detail-right-above">
                            <div class="above-play-introduction">
                                <div class="play-introduction-content">
                                    <div class="play-introduction-content-left">
                                        <img src="images/cover-douluo.jpg" class="cover">
                                    </div>
                                    <div class="play-introduction-content-right">
                                        <div class="play-introduction-content-right-name">
                                            <span class="play_name"></span>
                                            <div class="open_brief_information">
                                                <div>简介</div>
                                                <img src="images/arrow-right-icon.png">
                                            </div>
                                        </div>
                                        <div class="play-introduction-content-right-more">
                                            <div>
                                                <img src="images/fire-icon.png">
                                                <span class="hotpot"> </span>
                                                <span class="release_place"> </span>
                                                <span class="release_time"> </span>
                                                <span class="tag1"> </span>
                                            </div>
                                            <div class="tag2"></div>
                                            <div class="renew">更新至42集 · 全52集</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="play-introduction-renewtime">
                                    <span class="daily"> </span>
                                    <span>&nbsp;·&nbsp;追剧日历</span>
                                    <img src="images/arrow-right-icon.png">
                                </div>
                                <div class="play-introduction-icon">
                                    <div><img src="images/add-icon.png" class="collect"></div>
                                    <div><img src="images/comment-icon.png"></div>
                                    <div><img src="images/dian-icon.png"></div>
                                </div>
                            </div>
                            <div class="above-play-list">
                                <div class="play-list-number">
                                    <div class="play-list-number-button">
                                        <div class="play-list_item">1</div>
                                        <!-- <div>2</div>
                                        <div>3</div>
                                        <div>4</div>
                                        <div>5</div>
                                        <div>6</div>
                                        <div>7</div>
                                        <div>8</div>
                                        <div>9</div>
                                        <div>10</div>
                                        <div>11</div>
                                        <div>12</div>
                                        <div>13</div>
                                        <div>14</div>
                                        <div>15</div>
                                        <div>16</div>
                                        <div>17</div>
                                        <div>18</div>
                                        <div>19</div>
                                        <div>20</div>
                                        <div>21</div>
                                        <div>22</div>
                                        <div>23</div>
                                        <div>24</div>
                                        <div>25</div>
                                        <div>26</div>
                                        <div>27</div>
                                        <div>28</div>
                                        <div>29</div>
                                        <div>30</div> -->
                                    </div>
                                </div>
                                <div class="play_list_movie">
                                    <div class="play-list-top">
                                        <span>第一部</span>
                                        <span>第二部</span>
                                    </div>
                                    <div class="play_list_movie_container">
                                        <div class="play_list_movie_content">
                                            <div class="play_list_movie_content_cover">
                                                <img src="">
                                            </div>
                                            <div class="play_list_movie_content_title">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="detail-right-below">
                            <div class="detail-right-below-goods">
                                <div class="goods-header">周边商品
                                    <div class="goods-turnpage">
                                        <img src="images/arrow-left-icon.png">
                                        <span>1</span>
                                        <img src="images/arrow-right-icon.png">
                                    </div>
                                </div>
                                <div class="goods-detail">
                                    <div class="goods-2-items">
                                        <div class="goods-item">
                                            <div class="goods-item-left">
                                                <img src="images/goods1.jpg">
                                            </div>
                                            <div class="goods-item-detail">
                                                <div>唐三/小舞等比手办</div>
                                                <div>
                                                    <span class="price">¥299</span>
                                                    <span class="consumer">684购买</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="goods-item">
                                            <div class="goods-item-left">
                                                <img src="images/goods2.jpg">
                                            </div>
                                            <div class="goods-item-detail">
                                                <div>小舞一生守护手办</div>
                                                <div>
                                                    <span class="price">¥979</span>
                                                    <span class="consumer former-price">999</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="goods-goto">去主会场</div>
                                </div>
                            </div>
                            <div class="detail-right-below-short_video">
                                <div class="short_video-head">周边短视频</div>
                                <div class="short_video-choice">
                                    <span>花絮资讯</span>
                                    <span>更多短视频</span>
                                </div>
                                <div class="short_video-detail">
                                    <div class="short_video-item">
                                        <div class="short_video-item-left">
                                            <img src="images/cover-short_video1.jpg">
                                        </div>
                                        <div class="short_video-item-content">斗罗大陆动画：破茧一响，昊天锤登场！</div>
                                    </div>
                                    <div class="short_video-item">
                                        <div class="short_video-item-left">
                                            <img src="images/cover-short_video2.jpg">
                                        </div>
                                        <div class="short_video-item-content">斗罗大陆Ⅱ：巍巍昊天，佼佼战锤，昊天锤回归！</div>
                                    </div>
                                    <div class="short_video-item">
                                        <div class="short_video-item-left">
                                            <img src="images/cover-short_video3.jpg">
                                        </div>
                                        <div class="short_video-item-content">斗罗大陆Ⅱ：精英赛开启，我听到了破茧的回响！</div>
                                    </div>
                                </div>
                                <div class="short_video-all">全部</div>
                            </div>
                        </div>
                    </div>
                    <div class="detail_right_information">
                        <div class="detail_right_information_top">
                            <img src="images/arrow-left-icon.png" class="close_brief_information">
                            <span class="play_title">斗罗大陆Ⅱ绝世唐门</span>
                        </div>
                        <div class="detail_right_information_content">
                            <div class="information_above">
                                <div>
                                    <img src="images/fire-icon.png">
                                    <span class="information_tags">16134 · 内地 · 2023 · 东方玄幻 · 玄幻修真 · 英雄成长 · 热血战斗</span>
                                </div>
                                <div>
                                    <span>豆瓣高分</span>
                                </div>
                                <div>
                                    <span class="renew_information">更新至45集 · 全52集</span>
                                </div>
                            </div>
                            <div class="information_below">
                                <div class="information_below_title">简介</div>
                                <div class="information_below_content">
                                    这里没有魔法，没有斗气，没有武术，却有武魂。唐门创立万年之后的斗罗大陆上，唐门式微。一代天骄横空出世，新一代史莱克七怪能否重振唐门，谱写一曲绝世唐门之歌？
                                    百万年魂兽，手握日月摘星辰的死灵圣法神，导致唐门衰落的全新魂导器体系。一切的神奇都将一一展现。
                                    唐门暗器能否重振雄风，唐门能否重现辉煌？
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="login_model_box">
            <div class="login_model_box_content">
                <div class="login_model_box_close">×</div>
                <div class="login_model_box_title">
                    <span>登录</span>
                </div>
                <div class="login_model_box_notes">登录后高清播放更流畅</div>
                <div class="login_model_box_detail">
                    <div class="login_model_box_detail_left register">
                        <div class="login_model_box_detail_left_title">账号注册</div>
                        <div class="login_model_box_detail_left_tip">请输入注册账号和密码</div>
                        <div class="login_model_box_form">
                            <form class="login_form">
                                <div class="login_model_box_input">
                                    <input type="text" placeholder="用户名" class="register_username">
                                </div>
                                <div class="login_model_box_input">
                                    <input type="password" placeholder="密码" class="register_password">
                                </div>
                                <button type="button" class="login_model_box_submit_register">注册</button>
                            </form>
                        </div>
                        <div class="login_model_box_detail_left_bottom">
                            <a><span>找回密码</span></a>
                            <a><span class="to_login">登录账号</span></a>
                            <a><span>意见反馈</span></a>
                        </div>
                    </div>
                    <div class="login_model_box_detail_left login">
                        <div class="login_model_box_detail_left_title">密码登录</div>
                        <div class="login_model_box_detail_left_tip">推荐使用快捷登录，防止盗号</div>
                        <div class="login_model_box_form">
                            <form class="login_form">
                                <div class="login_model_box_input">
                                    <input type="text" placeholder="支持QQ号/邮箱/手机号登录" class="login_username">
                                </div>
                                <div class="login_model_box_input">
                                    <input type="password" placeholder="请输入密码" class="login_password">
                                </div>
                                <button type="button" class="login_model_box_submit_login">登录</button>
                            </form>
                        </div>
                        <div class="login_model_box_detail_left_bottom">
                            <a><span>找回密码</span></a>
                            <a><span class="to_register">注册账号</span></a>
                            <a><span>意见反馈</span></a>
                        </div>
                    </div>
                    <div class="login_model_box_detail_right">
                        <div class="login_model_box_right_content">
                            <ul class="login_model_box_right_select">
                                <li>
                                    <input type="checkbox">
                                    <label>全选 腾讯视频 将获得以下权限</label>
                                </li>
                                <li><input type="checkbox">
                                    <label>使用你的QQ头像、昵称信息</label>
                                </li>
                            </ul>
                            <div>授权即同意服务协议和QQ隐私保护指引</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="detailpage.js"></script>
    <script src="register&login.js"></script>
</body>

</html>